<template>
  <div class="breadcrumb">
    <el-breadcrumb :separator-icon="ArrowRight">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item v-for="item in breadList" :key="item.path">
        <router-link :to="{ path: `${item.path}` }">{{
          item.meta.title
        }}</router-link>
      </el-breadcrumb-item>
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/usermanage' }"
        >用户管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/goodsmanage/goodslist' }"
        >商品列表</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/goodsmanage/ordermanage' }"
        >订单管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/self' }">个人中心</el-breadcrumb-item> -->
    </el-breadcrumb>
  </div>
</template>

<script>
import { ArrowRight } from "@element-plus/icons-vue";
export default {
  name: "BreadCrumb",
  components: {},
  data() {
    return {
      ArrowRight,
      breadList: [],
    };
  },
  created() {
    this.breadList = this.$route.matched;
  },
  watch: {
    $route(to) {
      this.breadList = to.matched;
    },
  },
};
</script>

<style scoped lang="scss">
.breadcrumb {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
